<docs>
 ## 进入轮播
</docs>
<template>
  <transition name="confirm">
    <div class="picBox" >
      <van-swipe :loop="false" @change="onChange" ref="swiper">
        <van-swipe-item v-for="(image,index) in List" :key="index">
          <img :src="image" />
          <div class="jump" v-show="index+1 == List.length" @click="finish">
            <!-- <van-count-down class="second" :time="time" format="s" @finish="finish" /> -->
            <span>跳过</span>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </transition>
</template>
<script>
export default {
  name: "swipe",
  props: {
    // visible: {
    //   type: Boolean,
    //   default: true
    // }
  },
  data() {
    return {
      time:5000,
      List: [
        // require("../common/images/one.png"),
        "",
        ""
      ]
    };
  },
  methods: {
    onChange() {},
    finish() {
      this.$emit("visiHide", false);
    }
  }
};
</script>
<style scoped lang="scss">
@import "~common/scss/var.scss";
.picBox {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 100;
  div,
  img {
    height: 100%;
    width: 100%;
    line-height: 100%;
  }
  .second{
    display: inline-block;
    height: 100%;
    line-height: 100%;
    width: 50px;
  }
  span{
    font-size: 38px;
    color: #fff;
  }
  .jump {
    position: absolute;
    bottom: $height-div*2;
    right: $height-gw;
    width: $width-box;
    height: $height-search_input;
    border-radius: $radius-base;
    line-height: $height-search_input;
    text-align: center;
    background-color: #ff9900;
    div {
      display: inline-block;
      // height: 100%;
      // width: 100%;
      font-size: 38px;
      color: #fff;
    }
  }
  /deep/ .van-swipe__indicators{
    width: 100%;
    padding: 10px 0;
    // opacity: 0.5;
    // background-color: #000;
    justify-content: center;
    .van-swipe__indicator{
      height: 12px;
      width: 90px;
      margin: 0 10px;
      border-radius: 0;
    }
    .van-swipe__indicator--active{
      background-color: #fff;
      opacity: 1;
    }

  }
  /deep/ .van-swipe__indicators:after{
    content:"";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 32px;
    background-color: #000;
    opacity: 0.5;
    z-index: -1;
  }
}
</style>
